<template>
  <div class="home">
    <Navbar />
    <div class="home__container">
      <Goods v-for="(item, index) in goods" :class="index === 0 && 'first-goods'" :title="item.name" :color="item.color"
        :key="item.id" :tid="item.id" :list="item.list" />

    </div>

  </div>
</template>

<script setup lang="ts">
import { getGoodsList } from "@/api";
import Navbar from '@/components/Navbar.vue';
import Goods from "./components/index.vue"
import { ref } from 'vue';
export interface GoodsItem {
  id: number;
  name: string;
  originalPrice: number;
  price: number;
  img?: string
  desc?: string
  discount?: number
}
interface GoodsList {
  id: number;
  list: GoodsItem[];
  name: string;
  color: string;
  discount?: number
}

export type ShopBagType = GoodsItem & { count: number, token?: string }
const goods = ref<GoodsList[]>([])
async function initData() {
  const data = await Promise.all([
    getGoodsList({ type: JSON.stringify({ key: "type", value: 1 }) }),
    getGoodsList({ type: JSON.stringify({ key: "type", value: 2 }) }),
    getGoodsList({ type: JSON.stringify({ key: "type", value: 3 }) })
  ])
  data.forEach(({ data }: { data: GoodsItem[] }, index) => {
    goods.value.push({
      id: index + 1,
      list: data,
      name: index === 0 ? "Fresh vegetables" : index === 1 ? "Fresh fruits" : "Bakery Products",
      color: index === 0 ? "#f8e5ff" : index === 1 ? "#d4f8fb" : "#c9ffcb"
    })
  })
}
initData()

</script>

<style lang="scss">
.home {
  background: var(--linear-gradient);
  height: 100vh;

  .home__container {
    padding: 0 20rem 20rem;
    box-sizing: border-box;
    padding-bottom: 50rem;
  }

  .first-goods {
    margin-top: 10rem;
  }
}
</style>